/**
 文 件 名：DetailPg
 描    述：显示详细信息(用一句话描述该文件做什么)
 项目名称：movie
 作    者：武汉大学国家网络安全学院@沈家强
 发布日期：2018/05/19 8:11
 文件版本：V1.0
 注意：本内容仅限于武汉大学国家网络安全学院陈刚教授团队内部传阅，禁止外泄以及用于其他的商业目
 @Copyright: 2018 www.whu.edu.cn. All rights reserved.
 All rights Reserved, Designed By www.whu.edu.cn
 **/

import React, {Component} from 'react';

import {
  Platform,
  StyleSheet,
  FlatList,
  Text,
  Image,
  View,
  ActivityIndicator,
  Alert,
  ImageBackground,
  TouchableOpacity,
  Linking,

} from 'react-native';

//默认对应的访问地址
const apiPath = "https://api.douban.com/v2/movie/subject";

export default class DetailPg extends Component {
  //导航首页
  static navigationOptions = {
    headerTitle: '列表页面',
    headerTitleStyle:{
      flex: 1,
      textAlign: 'center',
    },
  }

  //设置相应的控件对应的信息
  state = {
    //对应的状态主要是是用于状态变化
    s_moviesItem: [],
    s_ready: false,
    s_videoUrl: null,
  }

  fetchDate = (strId) =>{
    return fetch(`${apiPath}/${strId}`)
    .then((response) => {return response.text()})
  }

  //加载相应的前面rander完成之后，再加载数据
  async componentDidMount() {
    let strId = this.props.navigation.state.params.id;
    let textData, jsonData;

    textData = "";

    // 读取
    await storage.load({
      key: strId,
      // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
      autoSync: true,
      // syncInBackground(默认为true)意味着如果数据过期，
      // 在调用sync方法的同时先返回已经过期的数据。
      // 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
      syncInBackground: true,
    }).then(ret => {
      // 如果找到数据，则在then方法中返回
      // 注意：这是异步返回的结果（不了解异步请自行搜索学习）
      // 你只能在then这个方法内继续处理ret数据
      // 而不能在then以外处理
      // 也没有办法“变成”同步返回
      // 你也可以使用“看似”同步的async/await语法
      textData = ret.dbTextData
    }).catch(err => {
      //如果没有找到数据且没有sync方法，
      //或者有其他异常，则在catch中返回
      console.warn(err.message);
    })

    if(textData == "")
    {
      console.log("网络取数据！");
      textData = await this.fetchDate(strId);
    }

    jsonData = JSON.parse(textData);

    storage.save({key: strId,  // 注意:请不要在key中使用_下划线符号!
      data: {
        dbTextData: textData,
      },
    });

    this.setState({
      //数据准备完毕
      s_ready: true,
      s_moviesItem: jsonData,
    })

    this.fetchMobileUrl(jsonData.mobile_url);
  }

  /**
   * 获取相应的手机段演示对应的地址mp4
   * @param strUrl 相应的mp4对应的地址
   * @returns {Promise.<void>}
   */
  fetchMobileUrl = async (strUrl) => {
    let strHtml = await fetch(strUrl);
    strHtml = await strHtml.text();
    const regex = /href="([\w}|\W]*\.mp4)"/;
    const result = strHtml.match(regex)
    //如果有对应的返回值，证明已经找到了对应的播放相应的MP4地址
    if(result && result[1])
    {
      this.setState({
        s_videoUrl: result[1],
      })
    }
  }

  /**
   * 插入目前已经有的对应的影片，目前使用最简单的link方案
   */
  playVideo = () => {
    const {s_videoUrl} = this.state;
    if(s_videoUrl)
    {
      Linking.openURL(s_videoUrl).catch(err => console.error('An error occurred', err));
    }
    else {
      Alert.alert("请稍等正在获取地址")
    }
  }

  render() {
    const {state, goBack} = this.props.navigation;
    const {s_moviesItem, s_ready,} = this.state;
    return(
        <View style={styles.rootItem}>
          {
            s_ready ?
                <View>
                  <TouchableOpacity onPress={this.playVideo}>
                    <ImageBackground  source={{uri: s_moviesItem.images.medium}} style={styles.imageItem} >
                      <Image source={require('../img/play-icon.png')} style={styles.imageLoading}/>
                    </ImageBackground>
                  </TouchableOpacity>
                  <Text>{s_moviesItem.images.medium}</Text>
                  <Text>{s_moviesItem.title}</Text>
                  <Text>{s_moviesItem.summary}</Text>
                </View>
            :
            <ActivityIndicator size="large" />
          }
        </View>
    )
  }
}

const styles = StyleSheet.create({
  rootItem: {
    paddingHorizontal:20,
    paddingTop: 20,
  },
  imageItem: {
    // paddingHorizontal: 15,
    width: 200,
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageLoading: {
    position:'absolute',
    left: 50,
    top: 50,
    width: 100,
    height: 100,
  }
});